<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div>
                <span>修改密码</span>
            </div>
        </template>
        <template #default>
            <div style="width: 500px" @keyup.enter="submit(ruleFormRef as FormInstance)">
                <el-form :model="formData" :rules="rules" label-width="auto" ref="ruleFormRef">
                    <el-form-item label="请输入旧密码" prop="oldPassword">
                        <el-input v-model="formData.oldPassword" type="password" autocomplete="off" show-password />
                    </el-form-item>
                    <el-form-item label="请输入新密码" prop="newPassword">
                        <el-input v-model="formData.newPassword" type="password" autocomplete="off" show-password />
                    </el-form-item>
                    <el-form-item label="再次输入新密码" prop="newPasswordAgain">
                        <el-input
                            v-model="formData.newPasswordAgain"
                            type="password"
                            autocomplete="off"
                            show-password
                        />
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" size="default" @click="submit(ruleFormRef as FormInstance)">
                            修改密码
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { EditPasswordForm } from "@/api/user/type";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { reqEditPassword } from "@/api/user/index";
// 引入工具
import { isEmpty } from "@/utils/tools/isEmpty";
// 定义表单
const formData = ref<EditPasswordForm>({
    oldPassword: "",
    newPassword: "",
    newPasswordAgain: "",
});
const validatePassword = (_rule: any, value: string, callback: any) => {
    if (isEmpty(value)) {
        return callback(new Error("密码不能为空"));
    }
    if (value.length < 6 || value.length > 30) {
        return callback(new Error("密码长度应在6-30之间"));
    }
    callback();
};
const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
    if (isEmpty(value)) {
        return callback(new Error("确认密码不能为空"));
    }
    if (value !== formData.value.newPassword) {
        return callback(new Error("两次输入的密码不一致"));
    }
    callback();
};
// 定义表单校验规则
const rules = reactive<FormRules<EditPasswordForm>>({
    newPassword: [{ validator: validatePassword, trigger: "blur" }],
    newPasswordAgain: [{ validator: validateConfirmPassword, trigger: "blur" }],
});
// 获取表单实例
const ruleFormRef = ref<FormInstance>();
// 修改密码
const submit = async ($FormEl: FormInstance) => {
    try {
        await $FormEl.validate();
    } catch (error) {
        ElMessage.error("数据不符合要求");
        return;
    }
    const result = await reqEditPassword(formData.value);
    if (result.code === 200) {
        formData.value = {
            oldPassword: "",
            newPassword: "",
            newPasswordAgain: "",
        };
        return ElMessage.success("修改密码成功");
    } else {
        return ElMessage.error(result.data);
    }
};
</script>

<style lang="scss" scoped></style>
